<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/style.css">
<!--
    <script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        !window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
    </script>
    <script src="js/public.js"></script>
-->
    <script src="js/area.js"></script>
    <script src="js/handlebars-v3.0.3.js"></script>
    <title>云中宝</title>
</head>

<body>
<div class="wrapper">
<div class="header">
    <ul class='clearfix'>
        <li class="header_title_wrapper">云中宝</li>
    </ul> 
</div>
<div class="main login_wrapper pd10">  
    <form action="">
    <div class="title">订单基本信息</div>
    <div class="form_item_group">
        <div class="form_item">
            <span class="form_label" for="">快递单号：</span>
            <input class="form_input w_10 awb" id="awb" type="text" name="awb" placeholder="">       
        </div>
        <div class="form_item">
            <span class="form_label" for="">发件人：</span>
            <input class="form_input w_10 real_name" id="real_name" type="text" name="real_name" placeholder="">       
        </div>
        <div class="form_item">
            <span class="form_label" for="">快递类型：</span>
            <select name="logistic_type" id="logistic_type" class="form_select w_10 logistic_type">
                <option value="1">EMS快递</option>
                <option value="2">顺丰快递</option>
                <option value="3">中国邮政</option>
                <option value="4">韵达快递</option>
                <option value="5">中通快递</option>
                <option value="6">天天快递</option>
                <option value="7">汇通快递</option>
                <option value="8">宅急送快运</option>
                <option value="9">鑫飞鸿速运</option>
            </select>       
        </div>
        <div class="form_item">
            <span class="form_label" for="">快递费用：</span>
            <input class="form_input w_10 logistic_price" id="logistic_price" type="text" name="logistic_price" placeholder="">       
        </div>
        <div class="form_item">
            <span class="form_label" for="">付费方：</span>
            <select name="ss_type" id="ss_type" class="form_select w_10 ss_type">
                <option value="1">寄方付</option>
                <option value="2">收方付</option>
            </select>       
        </div>
        <div class="form_item">
            <span class="form_label" for="">联系电话：</span>
            <input class="form_input w_10 mobile" id="mobile" type="text" name="mobile" placeholder="">       
        </div>
        <div class="form_item">
            <span class="form_label" for="">发件时间：</span>
            <input class="form_input w_10 send_time" id="send_time" type="datetime" name="send_time" placeholder="">       
        </div>
        <div class="form_item">
            <span class="form_label" for="">收件地址：</span>
            <div class="form_item w_10">
               <div class="form_input_wrapper w_3_3" style="border-right:1px solid #ccc">
                <select id="s_province" name="s_province" class="form_select s_province w_10"></select>
               </div>
               <div class="form_input_wrapper w_3_3" style="border-right:1px solid #ccc">    
                <select id="s_city" name="s_city" class="form_select s_city w_10"></select>
               </div>
               <div class="form_input_wrapper w_3_3">    
                <select id="s_county" name="s_county" class="form_select s_county w_10"></select>
               </div>  
            </div>      
        </div>
    </div>
    <div class="title">快递内容信息：</div>
    <div class="form_item_group" id="form_item">
        
    </div>
    
    <div class="form_item">
        <a class="btn btn_lg btn_round w_5" href="javascript:void(0)">确定</a>        
    </div>            
    </form>
</div> 
</div>
</div>
<style>
.baseerror{
    color: #f00
}
</style>
<script id="template" type="text/x-handlebars-template">
{{#each this}}
<div class="form_item">
    <span class="form_label" for="">{{text}}</span>
    <input class="form_input w_10" name="cl{{@index}}" id="cl{{@index}}" type="number" step="1" placeholder="" value="0">       
</div>
{{/each}}
<div class="form_item">
   <span class="form_label" for="">备注：</span>
    <textarea name="" id="" class="form_textarea w_10"></textarea>
</div>
</script> 
<script>
var cls=[{"id":"SFZ","text":"身份证"},
       {"id":"SBK","text":"社保卡"},
       {"id":"YHK","text":"银行卡"},
       {"id":"BL","text":"病例"},
       {"id":"HT","text":"合同"},
       {"id":"KJZ","text":"会计证"},
       {"id":"JSZ","text":"驾驶证"},
       {"id":"FJ","text":"附件"}]
    var x = new _init_area(s);
    var lk = Handlebars.compile(document.getElementById('template').innerHTML);
    document.getElementById('form_item').innerHTML=lk(cls)
document.querySelector('.btn').onclick=function(){
    var clsdata=cls_data(cls,'id')
}
function cls_data(cl,name){
    var _cls = cl
    var data=[];
    for(var i=0;i<_cls.length;i++){
        var _elm = {}
        _elm.name = _cls[i][name];
        _elm.num = document.getElementById('cl'+i).value;
        data.push(_elm)
    }
    return data;
}
    
</script> 
</body>
</html>